import React, { Component } from "react"
import {View, Text, Image, StyleSheet, TouchableOpacity} from 'react-native'
import {deviceWidth} from "../../../../util"
import navigationhelper from "../../../../components/navigationhelper"

export default class HomeCenter extends Component {
    render() {
        var data = this.props.module
        return (
            <View style={styles.itemList}>
                {
                    data.map(function (item, index) {
                        return <RenderItem key={index} item={item} action={() => {
                            if (item.redirect_type === 'webview') {
                                navigationhelper.navigate('Web', {url: item.path})
                            } else {

                                //走具体页面
                            }
                        }}/>
                    })
                }
            </View>

        )
    }
}

function RenderItem (props) {
    return (
        <View style={{paddingLeft: 16, paddingRight: 16}}>
            <View style={{display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: 5, marginTop: 10}}>
                <View style={{backgroundColor: '#378EFB', width: 3, height: 18, borderRadius: 2}}/>
                <Text style={{color: '#2E2E2E', fontSize: 17, fontFamily: 'PingFang SC', marginLeft: 5}}>{props.item.title}</Text>
            </View>
            <TouchableOpacity
                onPress={props.action}
                changeOpacity>
                <Image
                    style={styles.itemButton}
                    source={{uri: props.item.banner}} />
            </TouchableOpacity>
        </View>
    )
}

const styles = StyleSheet.create({
    itemButton: {
        height: ((deviceWidth - 32) * 121)/ 343,
        width: deviceWidth -32
    },
    itemList: {
        flexDirection: 'column'
    }
})